<template>
  <div class="search-app h100">
    <el-input
      placeholder="输入关键字过滤"
      size="mini"
      class="inline-input autocomplete-style"
      v-model="filterText"
      :clearable="true"
      suffix-icon="el-icon-search"
    ></el-input>
    <div class="search-down">
      <div class="recent-app">
        <label class="app-type">最常使用</label>
        <div class="usualUseList">
          <div class="no-data" v-if="!usualAppList.length">暂无数据</div>
          <div
            class="app-logo"
            @click="goAppDetailPage(item)"
            v-for="(item, index) in usualAppList"
            :key="index"
          >
            <el-image :src="item.imgSrc"></el-image>
            <span class="appName">{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="other-app">
        <label class="app-type">其他应用</label>
        <div class="otherAppList">
          <div class="no-data" v-if="!otherAppList.length">暂无数据</div>
          <div
            class="app-logo"
            @click="goAppDetailPage(item)"
            v-for="(item, index) in otherAppList"
            :key="index"
          >
            <el-image :src="item.imgSrc"></el-image>
            <span class="appName">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "searchApp",
  props: [""],
  data() {
    return {
      usualAppList: this.$store.state.user.allAuth.appList.slice(0, 2),
      allAppList: this.$store.state.user.allAuth.appList,
      otherAppList: [],
      restaurants: [],
      searchData: "",
      state1: "",
      filterText: "",
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  watch: {
    filterText(val) {
      if (!val) {
        this.otherAppList = this.allAppList;
      } else {
        /* let arr = this.querySearch(val);
        this.otherAppList= arr; */
        this.otherAppList = this.allAppList.filter((item) =>
          item.name.includes(val)
        );
      }
    },
  },
  methods: {
    init() {
      this.otherAppList = this.$store.state.user.allAuth.appList;
    },
    //搜索
    querySearch(queryString, cb) {
      let restaurants = this.allAppList;
      let results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      return results;
    },
    createFilter(queryString) {
      return (restaurant) => {
        if (restaurant.name) {
          return (
            restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) ===
            0
          );
        }
      };
    },
    goAppDetailPage(app) {
      this.$emit("hideDropdown", true);
      if (app.code == "upComingCenter") {
        //sessionStorage.setItem('currentType','undo')
      } else {
        //sessionStorage.setItem('currentType','application')
      }

      let { href } = this.$router.resolve({
        path: app.router,
        params: {
          name: app.name,
          logoSrc: app.logoSrc,
        },
      });
      this.$utils.setCurrentInfo();
      window.open(href, "_blank");
    },
    handleSelect(item) {
      //this.goAppDetailPage(item)
    },
  },
};
</script>

<style lang="less" scoped>
.search-app {
  height: 100%;
  width: 100%;
  font-family: Noto Sans SC;
  font-size: 14px;
  font-weight: 400;
}
.autocomplete-style {
  width: calc(100% - 40px);
  margin: 10px 20px;
}
.search-down {
  height: 356px;
  width: calc(100% - 0px);
  margin: 0 20px 0 0;
  overflow-y: auto;
}
/deep/.el-input__inner {
  height: 32px !important;
  line-height: 32px !important;
  border: 1px solid #cccccc;
  border-radius: 4px;
}
.recent-app {
  margin-top: 5px;
}
.other-app {
  margin-top: 23px;
}
.app-type {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin-left: 20px;
}
.otherAppList,
.usualUseList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-height: 32px;
  .app-logo {
    width: 50%;
    height: 48px;
    //line-height: 48px;
    display: flex;
    padding-left:20px;
    //justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .app-logo:hover {
    background-color: #c2f3fd;
  }
  /deep/.el-image {
    width: 32px;
    height: 32px;
  }
  .appName {
    color: #333333;
    padding-left: 13px;
    display: inline-block;
    line-height: 32px;
    vertical-align: super;
  }
}
/deep/.el-autocomplete-suggestion + .el-popper {
  display: none !important;
  z-index: 1;
}
</style>